<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">进出列表</x-header>
    <div class="content">
      <div class="mescroll"
           id="p2pbillinghistory_mescroll">
        <div class="scroll">
          <div class="invitation">
            <div class="title-card">
              <div>进货/出货</div>
              <div>委托价</div>
              <div>数量</div>
              <div>状态</div>
              <!-- <div>库存</div> -->
            </div>
            <div class="card"
                 :key="item.record_id"
                 v-for="item in daydataList">
              <div class="top">
                <template>
                  <div class="stock-in"
                       v-if="item.record_transaction_means==='0'">进货</div>
                  <div class="stock-out"
                       v-if="item.record_transaction_means==='1'">出货</div>
                  <div class="cat-unknown"
                       v-if="item.record_transaction_means==='2'">兑换</div>
                  <div class="cat-unknown"
                       v-if="item.record_transaction_means==='3'">提货</div>
                  <div class="cat-reward"
                       v-if="item.record_transaction_means==='4'">奖励</div>
                  <div class="cat-unknown"
                       v-if="item.record_transaction_means==='5'">领取</div>
                  <div class="cat-unknown"
                       v-if="item.record_transaction_means==='6'">进货（保）</div>
                       <div class="cat-unknown"
                       v-if="item.record_transaction_means==='7'">全程委托</div>
                </template>
                <div>{{item.commission_price}}</div>
                <div>{{item.commission_num}}</div>
                <template>
                  <div class="status"
                       v-if="item.trading_status==='0' && item.record_transaction_means!=='6'"
                       @click="withdrawalclick(item.record_id)"><span class="ing">委托中</span></div>
                  <div class="status"
                       v-if="item.trading_status==='0' && item.record_transaction_means==='6'"><span class="ing">未完成</span></div>
                  <div class="status"
                       v-if="item.trading_status==='1'">成交</div>
                  <div class="status"
                       v-if="item.trading_status==='2'">已撤销</div>
                  <div class="status"
                       v-if="item.trading_status==='3'">本金退回</div>
                  <div class="status"
                       v-if="item.trading_status==='4'">失效</div>
                  <div class="status"
                       v-if="item.trading_status==='5'">已完成</div>
                       <div class="status"
                       v-if="item.trading_status==='6' && item.record_transaction_means==='7'">已生效</div>
                       <div class="status"
                       v-if="item.trading_status==='7' && item.record_transaction_means==='7'">已失效</div>
                </template>
                <!-- <div>{{ item.goods_storage===null ? "——" : item.goods_storage}}</div> -->
              </div>
              <div class="bottom">
                <div class="no"
                     v-if="item.record_transaction_means==='5' && item.record_mode==='2' ">未解封</div>
                <div class="no"
                     v-if="item.record_transaction_means==='5' && item.record_mode==='1' ">已解封</div>
                <div class="no"
                     v-if="item.record_transaction_means!=='5'">{{item.record_sn}}</div>
                <div class="date">{{item.record_time}}</div>
              </div>
            </div>
          </div>
        </div>
        <div id="p2pbillinghistory_noData"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { XButton, XHeader, Flexbox, FlexboxItem, Grid, GridItem } from 'vux'
import { getInventoryBills, updataUserTransactionRecord } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import { formatDate } from '../../filters/date.js'
import MeScroll from 'mescroll.js'
import qs from 'qs'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Confirm)
export default {
  // 转换时间格式
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    XButton,
    XHeader,
    Grid,
    GridItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      daydataList: [], // 查询历史交易信息
      postData: {
        page: 1,
        rows: 20,
        today: false,
        sord: 'desc',
        sidx: 'record_time'
      },
      meScroll: null
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    jumpTo (path) {
      this.$router.push(path)
    },
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 撤单
    withdrawalclick (value) {
      var that = this
      this.$confirm({
        title: '',
        content: '您确定要撤单吗？',
        yesText: '确定',
        noText: '取消',
        yesStyle: {
          'background-color': '#f15353',
          'color': '#ffffff',
          'font-size': '16px'
        },
        noStyle: {
          'color': '#666666',
          'font-size': '16px'
        }
      }).then(() => {
        that.withdrawal(value)
      }).catch(() => {

      })
    },
    async withdrawal (value) {
      let form = new FormData()
      form.append('transactionrecordid', value)
      let res = await updataUserTransactionRecord(form)
      if (res && res.code === 200) {
        this.$toastText('撤单成功！')
        this.meScroll.resetUpScroll()
      }
    },
    // 查询用户当日交易信息
    async loaduserTransactionRecord (page) {
      this.setLoading({
        status: true,
        opacity: 0
      })
      this.postData.page = page.num
      this.postData.rows = page.size
      this.postData.user_id = this.user.user_id
      this.postData.goods_id = this.$route.query.id

      let res = await getInventoryBills(qs.stringify(this.postData))
      this.setLoading(false)
      if (res && res.code === 200) {
        if (page.num === 1) {
          this.daydataList = []
        }
        this.daydataList = [...this.daydataList, ...res.data.list]
        let hasNext = (this.daydataList.length < res.data.length)
        this.meScroll.endSuccess(res.data.length, hasNext)
      } else {
        this.meScroll.endErr()
      }
    },
    // 初始化滚动区
    initMeScroll () {
      let self = this
      this.$nextTick(() => {
        if (this.meScroll) {
          this.meScroll.resetUpScroll()
        } else {
          this.meScroll = new MeScroll('p2pbillinghistory_mescroll', {
            up: {
              callback (page) {
                self.loaduserTransactionRecord(page) // 加载用户今日交易信息
              },
              noMoreSize: 1,
              htmlNodata: '<p class="upwarp-nodata">我是有底线的</p>',
              empty: {
                warpId: 'p2pbillinghistory_noData',
                tip: '没有更多的数据',
                icon: 'http://img.zanjl.com/Content/img/image/withoutData@2x.png'
              }
            }
          })
        }
      })
    }
  },
  created () {
    this.initMeScroll()
  },
  activated () {
    this.initMeScroll()
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/css/pub';

  .view {
    text-align: center;
    .invitation {
      padding: 0;
      margin: .3125rem .375rem;
      .title-card {
        padding: 0 .5rem;
        height: .9rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        box-shadow: 0 .0125rem .025rem 0 rgba(46, 46, 46, 0.2);
        border-radius: .0625rem;
        div {
          flex: 1;
          line-height: .9rem;
          font-size: .34rem;
          color: #666666;
          text-align: center;
        }
      }
      .card {
        margin-top: .125rem;
        margin-bottom: 0;
        padding: 0 .5rem;
        background-color: #fff;
        box-shadow: 0 .0125rem .025rem 0 rgba(46, 46, 46, 0.2);
        border-radius: .0625rem;
        .top {
          height: .9rem;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          div {
            flex: 1;
            line-height: .9rem;
            font-size: $default_smallfont_size;
            color: $default_font_color;
            text-align: center;
          }
          .stock-in {
            color: #1eba35;
          }
          .stock-out {
            color: #ff0000;
          }

          .status {
            background-color: #fff;
            color: $default_font_color;
          }
          .status > .ing {
            background-color: #ffc000;
            color: #fff;
            padding: .025rem .1rem;
          }
        }
        .bottom {
          border-top: .0125rem solid #f7f7f7;
          height: .9rem;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            line-height: .9rem;
            font-size: $default_smallfont_size;
            color: $default_font_color;
          }
          .no {
            flex: 3;
            text-align: left;
          }
          .date {
            flex: 2;
            text-align: right;
          }
        }
      }
    }

    .flex-demo {
      text-align: center;
    }
    .icon {
      margin-bottom: .25rem;
      width: .6rem;
      height: .6rem;
    }
  }
</style>
